#include('../header.html', {title: '我的笔记'})

<div id="content-container" class="container">
  <div class="row row-3-9 my-layout">
    <div class="col-md-3">
      #include('sideMenu.html', {user: '', name: '我的笔记'})
    </div>

    <div id="vue-note" class="col-md-9">
      <div class="panel panel-default panel-col">
        <div class="panel-heading">我的笔记</div>
        <div class="panel-body">
          <div v-if="notes.length<=0" class="empty">还没有写过任何笔记</div>

          <div v-if="notes.length>0">
            <!--笔记列表 按照课程分类-->
            <ul class="media-list notebook-list" v-if="!noteShow">
              <template v-for="note in notes">
                <div class="media">
                  <img class="pull-left media-object" src="/static/img/java-base.jpg">
                  <div class="media-body">
                    <div class="pull-left">
                      <h4 class="media-heading">{{note.course.name}}</h4>
                      <div class="notebook-metas">
                        <span v-if="notes_info.length!=0" class="notebook-number">共 {{notes_info.length}} 篇笔记</span>
                      </div>
                      <div class="notebook-metas">
                        <span class="notebook-time">{{note.time}}</span>
                      </div>
                    </div>
                    <div class="pull-right">
                      <a class="notebook-go" href="javascript:" @click="showShow(note.course.id)">查看笔记</a>
                    </div>
                  </div>
                </div>
              </template>
              <nav v-if="outPage.totalPages>1" class="text-center">
              <navigation :pages="outPage.totalPages" :current.sync="outPage.pageNum" @navpage="gotoOutPage"/>
            </nav>
            </ul>
            <!--笔记详情查看-->
            <div class="notebook" v-if="noteShow">
              <div class="notebook-heading">
                <button class="btn btn-default btn-sm pull-right notebook-back-btn"
                        @click="hideShow">返回</button>
                <img class="notebook-icon" src="/static/img/java-base.jpg">
                <template v-if="notes_info.length>0">
                  {{notes_info[0].course.name}}的笔记 (共有 {{innerPage.totalRows}} 篇笔记)
                </template>
              </div>
              <div class="notebook-body">
                <template v-for="(note, index) in notes_info">
                  <div class="notebook-note">
                    <div class="notebook-note-heading">
                      <a :href="'/course/'+note.courseId+'/join/info'" target="_blank">{{note.task ? note.task.name : '默认教学计划'}}</a>
                      <a href="javascript:" class="pull-right notebook-note-delete" @click="deleteById(note.id,index)" title="删除笔记">
                        <span class="glyphicon glyphicon-trash"></span>
                      </a>
                    </div>
                    <div class="notebook-note-summary">笔记摘要</div>
                    <div class="notebook-note-body">
                      <p>{{note.content}}</p>
                    </div>
                  </div>
                </template>
                <nav v-if="innerPage.totalPages>1" class="text-center">
                  <navigation :pages="innerPage.totalPages" :current.sync="innerPage.pageNum" @navpage="gotoInnerPage"/>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    var noteVm = new Vue({
      el: '#vue-note',
      data: {
        noteShow: false,
        notes: [],
        notes_info: [],
        outPage: {
            pageNum: 1,
            totalPages: 1,
            limit: 8
        },
        innerPage: {
            pageNum: 1,
            totalPages: 1,
            limit: 8,
            totalRows: 1
        },
        kid: ''
      },
      watch: {
        'outPage.pageNum': function () {
            this.getNote();
        },
        'innerPage.pageNum': function () {
            this.getNoteInfo2();
        }
      },
      methods: {
        gotoOutPage: function (page) {
          this.outPage.pageNum = page;
        },
        gotoInnerPage: function (page) {
          this.innerPage.pageNum = page;
        },
        getNote: function () {
          var noteVm = this;
          $.post('/note/showAllNotes', {page: noteVm.outPage.pageNum}, function (data) {
              if (data.success) {
                  noteVm.notes = [];
                  noteVm.notes = data.payload.rows;
                  noteVm.outPage.pageNum = data.payload.pageNum;
                  noteVm.outPage.totalPages = data.payload.totalPages;
              }
          })
        },
        getNoteInfo: function (index) {
          var noteVm = this;
          noteVm.kid = index;
          $.post('/note/showAllNotesBykid', {kid: noteVm.kid, page: noteVm.innerPage.pageNum}, function (data) {
            if (data.success) {
                noteVm.notes_info = [];
                noteVm.notes_info = data.payload.rows;
                noteVm.innerPage.pageNum = data.payload.pageNum;
                noteVm.innerPage.totalPages = data.payload.totalPages;
                noteVm.innerPage.totalRows = data.payload.totalRows;
            }
          })
        },
        getNoteInfo2: function () {
            var noteVm = this;
            $.post('/note/showAllNotesBykid', {kid: noteVm.kid, page: noteVm.innerPage.pageNum}, function (data) {
                if (data.success) {
                    noteVm.notes_info = [];
                    noteVm.notes_info = data.payload.rows;
                    noteVm.innerPage.pageNum = data.payload.pageNum;
                    noteVm.innerPage.totalPages = data.payload.totalPages;
                    noteVm.innerPage.totalRows = data.payload.totalRows;
                }
            })
        },
        hideShow: function () {
          this.noteShow = false;
        },
        showShow: function (index) {
          this.getNoteInfo(index);
          this.noteShow = true;
        },
        deleteById: function (id,index) {
            var self = this;
            $.post("/note/deleteNotes",{id: id}, function (data) {
                if (data.success) {
                    self.notes_info.splice(index, 1);
                    layer.msg('删除成功！', {
                        time: 1500
                    });
                }

            })
        }
      },
      created: function () {
        this.getNote();
      }
    });
</script>
#include('../footer.html')